<!DOCTYPE html>

<html>
<head>
  <title>linkLabelsView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>linkLabelsView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="link-labels-view">LINK LABELS VIEW</h2>

        
      
        
        <p>Represents all editable / dynamic labels available on a <a href="linkView.html">Link View</a>.
Each link can have only one MapLinkLabelsView, but each MapLinkLabelsView can have up
to 3 editable labels (start, middle, end).</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">MapLinkLabelsView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">BaseView</span></span>

    <span class="attribute">visible</span>: <span class="literal">true</span>                       <span class="comment"># cached variable to check if labels are visible or hidden</span>
    <span class="attribute">currentEditingPosition</span>: <span class="literal">null</span>        <span class="comment"># holds the position which is being currently edited (Start, Center. End)</span>
    <span class="attribute">labelEditView</span>: <span class="literal">null</span>                 <span class="comment"># holds a [Label Edit View](labelEditView.html), used to change label values</span>
    <span class="attribute">svgStart</span>: <span class="literal">null</span>                      <span class="comment"># the label on the start of the link path</span>
    <span class="attribute">svgMiddle</span>: <span class="literal">null</span>                     <span class="comment"># the label on the middle of the link path</span>
    <span class="attribute">svgEnd</span>: <span class="literal">null</span>                        <span class="comment"># the label on the end of the link path</span>
    <span class="attribute">svgIconStart</span>: <span class="literal">null</span>                  <span class="comment"># the icon (used if text is empty) on the start of the link path</span>
    <span class="attribute">svgIconMiddle</span>: <span class="literal">null</span>                 <span class="comment"># the icon (used if text is empty) on the middle of the link path</span>
    <span class="attribute">svgIconEnd</span>: <span class="literal">null</span>                    <span class="comment"># the icon (used if text is empty) on the end of the link path</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Init the label edit view and set its parent view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>:<span class="function"> =&gt;</span>
        <span class="property">@baseInit</span>()
        <span class="property">@setEvents</span>()</pre></div>
        
      
        
        <p>Base dispose for links labels.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span></pre></div>
        
      
        
        <p>Remove all labels and icons from the DOM.</p>

        
          <div class='highlight'><pre>        <span class="property">@svgStart</span>?.remove()
        <span class="property">@svgMiddle</span>?.remove()
        <span class="property">@svgEnd</span>?.remove()
        <span class="property">@svgIconStart</span>?.remove()
        <span class="property">@svgIconMiddle</span>?.remove()
        <span class="property">@svgIconEnd</span>?.remove()</pre></div>
        
      
        
        <p>Force delete the link view&#39;s properties.</p>

        
          <div class='highlight'><pre>        <span class="property">@svgStart</span> = <span class="literal">null</span>
        <span class="property">@svgMiddle</span> = <span class="literal">null</span>
        <span class="property">@svgEnd</span> = <span class="literal">null</span>
        <span class="property">@svgIconStart</span> = <span class="literal">null</span>
        <span class="property">@svgIconMiddle</span> = <span class="literal">null</span>
        <span class="property">@svgIconEnd</span> = <span class="literal">null</span>
        <span class="property">@labelEditView</span> = <span class="literal">null</span>

        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Bind event listeners to the view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"edit:toggle"</span>, <span class="property">@toggleEdit</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"zoom:in"</span>, <span class="property">@onZoom</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"zoom:out"</span>, <span class="property">@onZoom</span>

        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:foreground"</span>, <span class="property">@setAllForeground</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:fontSize"</span>, <span class="property">@setAllFontSizes</span></pre></div>
        
      
        
        <h2 id="helper-properties">HELPER PROPERTIES</h2>

        
      
        
        <p>Return an array with all the SVG elements (labels and icons).</p>

        
          <div class='highlight'><pre>    <span class="attribute">svgs</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> [<span class="property">@svgStart</span>, <span class="property">@svgMiddle</span>, <span class="property">@svgEnd</span>, <span class="property">@svgIconStart</span>, <span class="property">@svgIconMiddle</span>, <span class="property">@svgIconEnd</span>]</pre></div>
        
      
        
        <p>Return an array with label SVG elements.</p>

        
          <div class='highlight'><pre>    <span class="attribute">svgsLabels</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> [<span class="property">@svgStart</span>, <span class="property">@svgMiddle</span>, <span class="property">@svgEnd</span>]</pre></div>
        
      
        
        <p>Return an array with icon SVG elements.</p>

        
          <div class='highlight'><pre>    <span class="attribute">svgsIcons</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> [<span class="property">@svgIconStart</span>, <span class="property">@svgIconMiddle</span>, <span class="property">@svgIconEnd</span>]</pre></div>
        
      
        
        <h2 id="render-and-positioning">RENDER AND POSITIONING</h2>

        
      
        
        <p>Render all label SVG elements on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">render</span>: <span class="function"><span class="params">(parent, location)</span> =&gt;</span>
        <span class="keyword">if</span> parent?
            <span class="property">@parentView</span> = parent

        <span class="keyword">if</span> <span class="keyword">not</span> location? <span class="keyword">or</span> location <span class="keyword">is</span> <span class="string">"Start"</span>
            left = <span class="property">@renderLabel</span> <span class="property">@model</span>.textStart(), <span class="property">@svgStart</span>, <span class="property">@svgIconStart</span>, <span class="string">"Start"</span>
            <span class="property">@svgStart</span> = left[<span class="number">0</span>]
            <span class="property">@svgIconStart</span> = left[<span class="number">1</span>]

        <span class="keyword">if</span> <span class="keyword">not</span> location? <span class="keyword">or</span> location <span class="keyword">is</span> <span class="string">"Middle"</span>
            center = <span class="property">@renderLabel</span> <span class="property">@model</span>.textMiddle(), <span class="property">@svgMiddle</span>, <span class="property">@svgIconMiddle</span>, <span class="string">"Middle"</span>
            <span class="property">@svgMiddle</span> = center[<span class="number">0</span>]
            <span class="property">@svgIconMiddle</span> = center[<span class="number">1</span>]

        <span class="keyword">if</span> <span class="keyword">not</span> location? <span class="keyword">or</span> location <span class="keyword">is</span> <span class="string">"End"</span>
            top = <span class="property">@renderLabel</span> <span class="property">@model</span>.textEnd(), <span class="property">@svgEnd</span>, <span class="property">@svgIconEnd</span>, <span class="string">"End"</span>
            <span class="property">@svgEnd</span> = top[<span class="number">0</span>]
            <span class="property">@svgIconEnd</span> = top[<span class="number">1</span>]

        <span class="property">@toggleEdit</span> <span class="property">@parentView</span>.parentView.editEnabled

        <span class="property">@setPosition</span> location
        <span class="property">@onZoom</span>()

        <span class="keyword">return</span> <span class="keyword">this</span></pre></div>
        
      
        
        <p>Render a single label, passing a value, the target label SVG, and the overlay SVG
in case the value is empty. The position tells the location of the label related
to its parent <a href="linkView.html">Link View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">renderLabel</span>: <span class="function"><span class="params">(value, svg, iconSvg, location)</span> =&gt;</span>
        x = <span class="number">0</span>
        y = <span class="number">0</span>
        text = value
        iconSize = SystemApp.Settings.map.icoActionsSize</pre></div>
        
      
        
        <p>If there&#39;s a label present already, copy its current position and text
before recreating it on a new label.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> svg?
            x = svg.attr <span class="string">"x"</span>
            y = svg.attr <span class="string">"y"</span>
            text = svg.attr <span class="string">"text"</span></pre></div>
        
      
        
        <p>If there&#39;s an icon present already, copy its current position
before recreating it on a new icon.</p>

        
          <div class='highlight'><pre>        <span class="keyword">else</span> <span class="keyword">if</span> iconSvg?
            x = iconSvg.attr <span class="string">"x"</span>
            y = iconSvg.attr <span class="string">"y"</span></pre></div>
        
      
        
        <p>If value is a text or object, update it.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> value? <span class="keyword">and</span> value <span class="keyword">isnt</span> <span class="string">""</span></pre></div>
        
      
        
        <p>Remove icon SVG, if there&#39;s one.</p>

        
          <div class='highlight'><pre>            <span class="keyword">if</span> iconSvg?
                iconSvg.unclick()
                iconSvg.unmouseover()
                iconSvg.unmouseout()
                iconSvg.removeData()
                iconSvg.remove()
                iconSvg = <span class="literal">null</span></pre></div>
        
      
        
        <p>Create label SVG if not existing yet.</p>

        
          <div class='highlight'><pre>            <span class="keyword">if</span> <span class="keyword">not</span> svg?
                svg = <span class="property">@parentView</span>.parentView.paper.text <span class="number">0</span>, <span class="number">0</span>, text

            svg.attr {<span class="string">"x"</span>: x, <span class="string">"y"</span>: y, <span class="string">"fill"</span>: <span class="property">@parentView</span>.model.foreground(), <span class="string">"font-size"</span>: <span class="property">@parentView</span>.model.fontSize()}
            svg.attr {<span class="string">"cursor"</span>: <span class="string">"pointer"</span>, <span class="string">"text-anchor"</span>: <span class="string">"middle"</span>}
            svg.click <span class="property">@click</span>

            $(svg.node).data <span class="string">"labelPosition"</span>, location

        <span class="keyword">else</span></pre></div>
        
      
        
        <p>Remove label SVG, if there&#39;s one.</p>

        
          <div class='highlight'><pre>            <span class="keyword">if</span> svg?
                svg.unclick()
                svg.removeData()
                svg.remove()
                svg = <span class="literal">null</span></pre></div>
        
      
        
        <p>Create icon SVG if not existing yet.</p>

        
          <div class='highlight'><pre>            <span class="keyword">if</span> <span class="keyword">not</span> iconSvg?
                iconSvg = <span class="property">@parentView</span>.parentView.paper.image SystemApp.Settings.map.icoAddLabelUrl, <span class="number">0</span>, <span class="number">0</span>, iconSize, iconSize

            iconSvg.attr {<span class="string">"x"</span>: x, <span class="string">"y"</span>: y, <span class="attribute">cursor</span>: <span class="string">"pointer"</span>, <span class="attribute">opacity</span>: SystemApp.Settings.map.icoActionsOpacity}
            iconSvg.click <span class="property">@click</span>
            iconSvg.mouseover <span class="property">@iconMouseOver</span>
            iconSvg.mouseout <span class="property">@iconMouseOut</span>

            $(iconSvg.node).data <span class="string">"labelPosition"</span>, location

        <span class="keyword">return</span> [svg, iconSvg]</pre></div>
        
      
        
        <p>Show the link labels and icons.</p>

        
          <div class='highlight'><pre>    <span class="attribute">show</span>:<span class="function"> =&gt;</span>
        <span class="property">@visible</span> = <span class="literal">true</span></pre></div>
        
      
        
        <p>Set opacity 1 on all labels.</p>

        
          <div class='highlight'><pre>        opacity = {<span class="string">"opacity"</span>: <span class="number">1</span>}
        svgs = <span class="property">@svgsLabels</span>()
        s?.animate(opacity, SystemApp.Settings.map.blinkInterval) <span class="keyword">for</span> s <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <p>Set the opacity defined on the <a href="settings.html">Settings</a>, on all add label icons.</p>

        
          <div class='highlight'><pre>        opacity = {<span class="string">"opacity"</span>: SystemApp.Settings.map.icoActionsOpacity}
        svgs = <span class="property">@svgsIcons</span>()
        s?.animate(opacity, SystemApp.Settings.map.blinkInterval) <span class="keyword">for</span> s <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <p>Hide the link labels and icons.</p>

        
          <div class='highlight'><pre>    <span class="attribute">hide</span>:<span class="function"> =&gt;</span>
        <span class="property">@visible</span> = <span class="literal">false</span>
        <span class="property">@currentEditingPosition</span> = <span class="literal">null</span>

        opacity = {<span class="string">"opacity"</span>: <span class="number">0</span>}
        svgs = <span class="property">@svgs</span>()
        s?.animate(opacity, SystemApp.Settings.map.blinkInterval) <span class="keyword">for</span> s <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <p>Hide only the icons (where no label text has been defined).</p>

        
          <div class='highlight'><pre>    <span class="attribute">hideIcons</span>:<span class="function"> =&gt;</span>
        opacity = {<span class="string">"opacity"</span>: <span class="number">0</span>}
        svgs = <span class="property">@svgsIcons</span>()
        s?.animate(opacity, SystemApp.Settings.map.blinkInterval) <span class="keyword">for</span> s <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <p>Set the link label positions on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setPosition</span>: <span class="function"><span class="params">(location)</span> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@visible</span>

        iconSize = SystemApp.Settings.map.icoActionsSize
        iconHalfSize = iconSize / <span class="number">2</span>

        path = <span class="property">@parentView</span>.svg.svgLine
        lineLength = path.getTotalLength()</pre></div>
        
      
        
        <p>We need to check if line is long enough! Otherwise add the start and
end icons on the very start and very end of the line, without adding the padding
of 1.5 times the iconSize.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> lineLength &gt; iconSize * <span class="number">2</span>
            startPos = path.getPointAtLength(iconSize + iconHalfSize)
            endPos = path.getPointAtLength(lineLength - iconSize - iconHalfSize)
        <span class="keyword">else</span>
            startPos = path.getPointAtLength(iconHalfSize)
            endPos = path.getPointAtLength(lineLength - iconHalfSize)

        middlePos = path.getPointAtLength(lineLength / <span class="number">2</span>)</pre></div>
        
      
        
        <p>Set start label position.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="keyword">not</span> location? <span class="keyword">or</span> location <span class="keyword">is</span> <span class="string">"Start"</span>
            <span class="property">@svgStart</span>?.attr startPos
            startPos.x -= iconHalfSize
            startPos.y -= iconHalfSize
            <span class="property">@svgIconStart</span>?.attr startPos</pre></div>
        
      
        
        <p>Set middle label position.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="keyword">not</span> location? <span class="keyword">or</span> location <span class="keyword">is</span> <span class="string">"Middle"</span>
            <span class="property">@svgMiddle</span>?.attr middlePos
            middlePos.x -= iconHalfSize
            middlePos.y -= iconHalfSize
            <span class="property">@svgIconMiddle</span>?.attr middlePos</pre></div>
        
      
        
        <p>Set end label position.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="keyword">not</span> location? <span class="keyword">or</span> location <span class="keyword">is</span> <span class="string">"End"</span>
            <span class="property">@svgEnd</span>?.attr endPos
            endPos.x -= iconHalfSize
            endPos.y -= iconHalfSize
            <span class="property">@svgIconEnd</span>?.attr endPos</pre></div>
        
      
        
        <p>Bring the labels to the front of the map. Usually called after changing
the selected link on the current <a href="mapView.html">Map View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toFront</span>:<span class="function"> =&gt;</span>
        svgs = <span class="property">@svgs</span>()
        s?.toFront() <span class="keyword">for</span> s <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <p>Bring the labels to the back of the current <a href="mapView.html">Map View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toBack</span>:<span class="function"> =&gt;</span>
        svgs = <span class="property">@svgs</span>()
        s?.toBack() <span class="keyword">for</span> s <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <p>When user hovers the mouse over an &quot;add label&quot; icon, set its opacity to 1,
unless the <code>isCreatingLink</code> property of the <a href="mapView.html">Map View</a> is true.</p>

        
          <div class='highlight'><pre>    <span class="attribute">iconMouseOver</span>:<span class="function"> -&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> SystemApp.mapView.isCreatingLink
        <span class="property">@attr</span> {<span class="string">"opacity"</span>: <span class="number">1</span>}</pre></div>
        
      
        
        <p>When mouse leaves an &quot;add label&quot; icon, set its opacity to the value set on the <a href="settings.html">Settings</a>,
unless the <code>isCreatingLink</code> property of the <a href="mapView.html">Map View</a> is true.</p>

        
          <div class='highlight'><pre>    <span class="attribute">iconMouseOut</span>:<span class="function"> -&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> SystemApp.mapView.isCreatingLink
        <span class="property">@attr</span> {<span class="string">"opacity"</span>: SystemApp.Settings.map.icoActionsOpacity}</pre></div>
        
      
        
        <p>When user put map on &quot;Edit Mode&quot;, show the label icons. If in locked mode, hide them.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleEdit</span>: <span class="function"><span class="params">(enabled)</span> =&gt;</span>
        svgs = <span class="property">@svgsIcons</span>()

        <span class="keyword">if</span> enabled
            svg?.show() <span class="keyword">for</span> svg <span class="keyword">in</span> svgs
        <span class="keyword">else</span>
            svg?.hide() <span class="keyword">for</span> svg <span class="keyword">in</span> svgs</pre></div>
        
      
        
        <h2 id="label-data-binding">LABEL DATA BINDING</h2>

        
      
        
        <p>Set the value of the specified label.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setLabelValue</span>: <span class="function"><span class="params">(svg, value)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> svg? <span class="keyword">or</span> <span class="keyword">not</span> value?
            <span class="keyword">return</span>

        svg.attr {<span class="string">"text"</span>: value}</pre></div>
        
      
        
        <p>Binds values from <a href="auditData.html">Audit Data items</a> to
the related link labels.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindAllLabelsData</span>:<span class="function"> =&gt;</span>
        <span class="property">@bindLabelData</span> <span class="property">@svgStart</span>, <span class="property">@model</span>.textStart()
        <span class="property">@bindLabelData</span> <span class="property">@svgMiddle</span>, <span class="property">@model</span>.textMiddle()
        <span class="property">@bindLabelData</span> <span class="property">@svgEnd</span>, <span class="property">@model</span>.textEnd()</pre></div>
        
      
        
        <p>Get the binding value which can come from an <a href="auditData.html">AuditData</a> or
a <a href="variable.html">Variable</a> and set it to the specified label.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindLabelData</span>: <span class="function"><span class="params">(svg, value)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> svg?
            <span class="keyword">return</span>

        newValue = SystemApp.DataUtil.getDataBindingValue value
        <span class="property">@setLabelValue</span> svg, newValue</pre></div>
        
      
        
        <h2 id="label-edit">LABEL EDIT</h2>

        
      
        
        <p>When user clicks a label, check if the &quot;Delete&quot; key modifier is being pressed and
proceed with removing the label, or show the textbox for edition (call <code>showEditLabel</code>).</p>

        
          <div class='highlight'><pre>    <span class="attribute">click</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        src = $ e.target
        data = src.data <span class="string">"labelPosition"</span>

        <span class="keyword">if</span> <span class="keyword">not</span> data? <span class="keyword">or</span> data <span class="keyword">is</span> <span class="string">""</span>
            src = src.parent()
            data = src.data <span class="string">"labelPosition"</span>

        <span class="property">@currentEditingPosition</span> = data</pre></div>
        
      
        
        <p>Set the current selected element on the <a href="mapView.html">Map View</a>.</p>

        
          <div class='highlight'><pre>        <span class="property">@parentView</span>.parentView.addToSelected <span class="property">@parentView</span>

        <span class="keyword">if</span> <span class="property">@parentView</span>.parentView.editEnabled
            <span class="keyword">if</span> <span class="property">@isEventDelete</span> e
                <span class="property">@parentView</span>.blinkAndRemove()
            <span class="keyword">else</span>
                <span class="property">@showEditLabel</span> e

        e.preventDefault()
        e.stopPropagation()</pre></div>
        
      
        
        <p>Start editing one of the link labels. This will create a temporary textbox on the map where
the user can edit or bind values from an <a href="auditData.html">AuditData</a> to the label text.</p>

        
          <div class='highlight'><pre>    <span class="attribute">showEditLabel</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@labelEditView</span>?
            <span class="property">@labelEditView</span> = <span class="keyword">new</span> SystemApp.MapLabelEditView()
            <span class="property">@labelEditView</span>.render <span class="keyword">this</span>
            <span class="property">@labelEditView</span>.<span class="literal">on</span> <span class="string">"save"</span>, <span class="property">@saveEditLabel</span>

        src = e.target
        src = src.parentElement <span class="keyword">if</span> <span class="keyword">not</span> src.getBBox?
        pos = src.getBBox()</pre></div>
        
      
        
        <p>Make sure text is never undefined or null!</p>

        
          <div class='highlight'><pre>        text = <span class="property">@model</span>.get <span class="string">"text<span class="subst">#{<span class="property">@currentEditingPosition</span>}</span>"</span>
        text = <span class="string">""</span> <span class="keyword">if</span> <span class="keyword">not</span> text?</pre></div>
        
      
        
        <p>We need to remove half the width and height to properly get the center values (and not the offset).</p>

        
          <div class='highlight'><pre>        <span class="property">@labelEditView</span>.show text, pos.x + pos.width / <span class="number">2</span>, pos.y + pos.height</pre></div>
        
      
        
        <p>Save the edited value of the <a href="labelEditView.html">Label Edit View</a> to the
<code>text</code> property of the model.</p>

        
          <div class='highlight'><pre>    <span class="attribute">saveEditLabel</span>: <span class="function"><span class="params">(view, value)</span> =&gt;</span>
        <span class="property">@model</span>.set <span class="string">"text<span class="subst">#{<span class="property">@currentEditingPosition</span>}</span>"</span>, value
        <span class="property">@model</span>.save()
        <span class="property">@parentView</span>.parentView.model.save()

        <span class="property">@render</span> <span class="property">@parentView</span>, <span class="property">@currentEditingPosition</span>

        <span class="property">@bindAllLabelsData</span>()

        <span class="property">@currentEditingPosition</span> = <span class="literal">null</span></pre></div>
        
      
        
        <h2 id="text-size-and-zoom">TEXT SIZE AND ZOOM</h2>

        
      
        
        <p>When user zooms in or out, check the current zoom level and resize
the labels accordingly. Fonts size will increase when zooming out,
but won&#39;t decrease when zooming in (zoom more than 1).</p>

        
          <div class='highlight'><pre>    <span class="attribute">onZoom</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@parentView</span>.parentView.currentZoom &lt; <span class="number">1</span>
            <span class="keyword">return</span>

        <span class="property">@setAllFontSizes</span> e</pre></div>
        
      
        
        <p>Set the foreground color ALL labels.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setAllForeground</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="property">@setForeground</span>(svg, <span class="property">@parentView</span>.foreground()) <span class="keyword">for</span> svg <span class="keyword">in</span> [<span class="property">@svgStart</span>, <span class="property">@svgMiddle</span>, <span class="property">@svgEnd</span>]</pre></div>
        
      
        
        <p>The the foreground color for the specified label.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setForeground</span>: <span class="function"><span class="params">(svg, color)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> svg?
            <span class="keyword">return</span>

        svg.attr {<span class="string">"fill"</span>: color}</pre></div>
        
      
        
        <p>Set the font size for ALL labels.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setAllFontSizes</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        zoom = <span class="number">1</span>
        zoom = <span class="property">@parentView</span>.parentView.currentZoom <span class="keyword">if</span> <span class="property">@parentView</span>.parentView.currentZoom &gt; <span class="number">1</span>

        fontSize = <span class="property">@model</span>.fontSize() * zoom
        fontSize = Math.round fontSize

        <span class="property">@setFontSize</span>(svg, fontSize) <span class="keyword">for</span> svg <span class="keyword">in</span> [<span class="property">@svgStart</span>, <span class="property">@svgMiddle</span>, <span class="property">@svgEnd</span>]</pre></div>
        
      
        
        <p>The the font size for the specified label. Usually called when user is zooming
the map in or out.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setFontSize</span>: <span class="function"><span class="params">(svg, fontSize)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> svg?
            <span class="keyword">return</span>

        svg.attr {<span class="string">"font-size"</span>: fontSize}</pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
